<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import { breakpointsAntDesign, useBreakpoints } from '@vueuse/core'
const PcLogin = defineAsyncComponent(() => import('./PcLogin.vue'))
const MobileLogin = defineAsyncComponent(() => import('./MobileLogin.vue'))
const breakpoints = useBreakpoints(breakpointsAntDesign)
const isLg = breakpoints.smaller('lg')
</script>
<template>
  <div class="wapper">
    <template v-if="isLg">
      <MobileLogin></MobileLogin>
    </template>
    <template v-else>
      <PcLogin></PcLogin>
    </template>
  </div>
</template>

<style lang="less" scoped>
.wapper {
  background-color: #1d4359;
  height: 100%;
}
</style>
